<template>
	<view class="msg">

		<!------------------------ 聊天内容区START ------------------------>
		<scroll-view class="content" :scroll-y="true" :show-scrollbar="false" :scroll-into-view="toView"
			:scroll-with-animation="true">
			<view class="msg-item" v-for="v,k in msgs" :key="k" :class="v.self?'self':'ta'" :id="'msg-item-' + k">
				<image v-if="!v.self" class="ta-avatar" :src="personInfo.ta.avatar"></image>
				<text v-if="v.type=='text'">
					{{v.msg}}
				</text>
				<image class="img" @click="previewImage(v,k)" v-if="v.type=='image'" :src="v.path" mode="widthFix">
				</image>
				<image v-if="v.self" class="self-avatar" :src="personInfo.self.avatar"></image>
			</view>
		</scroll-view>
		<!------------------------ 聊天内容区END ------------------------>

		<!------------------------ 输入框START ------------------------>
		<view class="input-box">
			<view class="msg-input-box">
				<view class="msg-img-box">
					<view class="textarea-box">
						<textarea maxlength="-1" v-model="msg" :cursor-spacing="20" :show-confirm-bar="false"
							disable-default-padding :auto-height="isAutoHeight" :adjust-position="true"
							placeholder="输入消息..." @keyboardheightchange="keyboardheightEvent" @input="inputEvent"
							@linechange="lineEvent" />
						<view class="send-img-btn" :class="isShowSendImg?'send-img-show':'send-img-mis'"
							@click="sendImg">
							<image src="../../static/send-img.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="send-msg-btn" @click="sendMsg">
					<image src="../../static/send-msg.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!------------------------ 输入框END ------------------------>

	</view>
</template>


<script>
	import Socket from "../../common/js/socket.js"
	export default {
		data() {
			return {
				toView: '',
				isShowSendImg: true,
				isAutoHeight: true,
				keyboardHeight: 0,
				scrollTop: 1000,

				mSocket: null,
				mSocketUrl: 'ws://192.168.2.20:9999/echo',
				msg: "",
				msgs: [],

				//人员基本信息
				personInfo: {
					ta: {
						name: "张三",
						age: 19,
						avatar: "https://tse2-mm.cn.bing.net/th/id/OIP-C.A62ridUzhYi0J-ceVQX6jwAAAA?pid=ImgDet&rs=1",
					},
					self: {
						name: "李四",
						age: 23,
						avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.wriYMHA5HHdUVCsMUlLiJQAAAA?pid=ImgDet&rs=1",
					}
				}
			};
		},
		onShow() {

		},
		onLoad() {
			this.init()
		},
		beforeDestroy() {
			// this.mSocket.onDestroy();
		},
		methods: {
			inputEvent(e) {
				if (e.detail.value == '') {
					this.isShowSendImg = true
				} else {
					this.isShowSendImg = false
				}
			},
			lineEvent(e) {
				if (e.detail.lineCount >= 3) {
					this.isAutoHeight = false
				} else {
					this.isAutoHeight = true
				}
			},
			keyboardheightEvent(e) {
				this.keyboardHeight = e.detail.height
			},
			init() {
				//设置标题
				uni.setNavigationBarTitle({
					title: "张三"
				})

				setInterval(() => {
					this.msgs.push({
						uuid: 1001,
						self: false,
						time: '2021-10-26',
						type: "text",
						msg: "哈哈哈"
					})
					this.scrollToBottom()
				}, 1000 * 5)


				//创建socket
				// this.mSocket = new Socket({
				// 	url: this.mSocketUrl,
				// 	onSuccess: this.onSuccess,
				// 	onError: this.onError,
				// 	onMessage: this.onMessage
				// })
			},
			onSuccess(res) {
				console.log("连接成功");
			},
			onError(err) {
				console.log("连接失败");
			},
			onMessage(res) {
				console.log("收到了消息:" + res.data);
			},
			//
			scrollToBottom() {
				this.toView = 'msg-item-' + (this.msgs.length - 1)
			},
			previewImage(v, k) {
				let current = 0
				let urls = []
				this.msgs.forEach((v1, k1) => {
					if (v1.type === "image") {
						urls.push(v1.path)
					}
				})
				urls.forEach((v1, k1) => {
					if (v.path === v1) {
						current = k1
					}
				})
				uni.previewImage({
					current,
					urls
				})
			},
			sendImg() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						let path = res.tempFilePaths
						this.msgs.push({
							uuid: 1002,
							self: true,
							time: '2021-10-26',
							type: "image",
							path: path[0]
						})
						this.scrollToBottom()
					}
				});
			},
			sendMsg() {
				this.msgs.push({
					uuid: 1002,
					self: true,
					time: '2021-10-26',
					type: "text",
					msg: this.msg
				})
				this.msg = ""
				this.isShowSendImg = true
				this.scrollToBottom()
				// this.mSocket.sendMsg(this.msg)
			},
		}
	}
</script>

<style lang="scss">
	.msg {
		width: 100%;
		max-height: 100%;
		background-color: #292F3F;
		overflow: hidden;

		.content ::-webkit-scrollbar {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.content {
			height: calc(100vh);
			padding: 0 20px;
			padding-top: 20rpx;
			padding-bottom: 120rpx;

			.self {
				justify-content: flex-end;

				text {
					background: #272A35;
					border-radius: 40rpx;
					border-bottom-right-radius: 0;
					margin-right: 88rpx;
				}

				.img {
					max-width: 375rpx;
					background: #272A35;
					border-radius: 40rpx;
					border-bottom-right-radius: 0;
					margin-right: 88rpx;
				}
			}

			.ta {
				justify-content: flex-start;

				text {
					background: #373E4E;
					border-radius: 40rpx;
					border-bottom-left-radius: 0;
					margin-left: 88rpx;
				}

				.img {
					max-width: 375rpx;
					background: #373E4E;
					border-radius: 40rpx;
					border-bottom-left-radius: 0;
					margin-left: 88rpx;
				}
			}

			.msg-item {
				display: flex;
				position: relative;
				margin-bottom: 20rpx;

				.ta-avatar,
				.self-avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 20rpx;
					position: absolute;
					bottom: 0;
				}

				.ta-avatar {
					margin-right: 20rpx;
					left: 0;
				}

				.self-avatar {
					margin-left: 20rpx;
					right: 0;
				}

				text {
					max-width: 375rpx;
					font-size: 26rpx;
					display: inline-block;
					color: #FFFFFF;
					padding: 30rpx;
				}
			}
		}



		.input-box {
			width: 100%;
			min-height: 120rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 10;

			.msg-input-box {
				width: 100%;
				position: relative;
				min-height: 120rpx;

				.msg-img-box {
					width: 650rpx;
					display: flex;
					position: relative;
					padding: 20rpx 20rpx;

					.textarea-box {
						width: 100%;
						// background-color: rgba($color: #000000, $alpha: 0.25);
						background-color: #373E4E;
						padding: 20rpx 30rpx;
						border-radius: 10px;
						min-height: 80rpx;
						position: relative;


						display: flex;
						align-items: center;
						justify-content: center;

						textarea ::-webkit-scrollbar {
							display: none !important;
							width: 0 !important;
							height: 0 !important;
							-webkit-appearance: none;
							background: transparent;
						}

						textarea {
							width: 100%;
							// background-color: #5fbec3;
							// min-height: 28rpx;
							line-height: 28rpx;
							letter-spacing: 2rpx;
							color: #FFFFFF;
							font-size: 28rpx;
						}

						.send-img-btn {
							width: 80rpx;
							height: 80rpx;
							background: #373E4E;
							border-radius: 10px;
							position: absolute;
							right: 0;
							top: 0;
							z-index: 11;
							transition: all 0.4s;

							image {
								width: 100%;
								height: 100%;
								padding: 16rpx;
							}
						}
					}


					.send-img-show {
						visibility: visible;
						opacity: 1;
					}

					.send-img-mis {
						visibility: hidden;
						opacity: 0;
					}
				}

				.send-msg-btn {
					width: 80rpx;
					height: 80rpx;
					background: #837DFF;
					border-radius: 10px;
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;

					image {
						width: 100%;
						height: 100%;
						padding: 13rpx;
					}
				}


			}
		}

	}
</style>
